<template>
  <div class="poster">
    <!-- <div>我的海报</div> -->
    <van-grid class="poster-grid" :border="false" :column-num="2">
      <van-grid-item
        v-for="(item, index) in list"
        :key="index"
        @click="
          $router.push(
            '/posterList/' +
              item.id +
              '/' +
              $store.state.userInfo.F_Question +
              '/' +
              $store.state.userInfo.F_Account
          )
        "
      >
        <img :src="item.url" />
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
  setup() {
    const data = reactive({
      list: [
        {
          id: 0,
          url: "http://www.higuang365.com/public/images/poster/poster1.jpg",
        },
        {
          id: 1,
          url: "http://www.higuang365.com/public/images/poster/poster2.jpg",
        },
        {
          id: 2,
          url: "http://www.higuang365.com/public/images/poster/poster3.jpg",
        },
        {
          id: 3,
          url: "http://www.higuang365.com/public/images/poster/poster4.jpg",
        },
        {
          id: 4,
          url: "http://www.higuang365.com/public/images/poster/poster5.jpg",
        },
      ],
    });
    return { ...toRefs(data) };
  },
};
</script>
<style lang="scss" scoped>
.poster {
  margin: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.poster-grid {
  justify-content: space-evenly;
}
</style>